<script type="text/javascript" src="/static/jquery-2.0.3.min.js"></script>

<div>
    <div class="layer_div">
        <select name="shop_id" id="shop_id" class="layer_select">
            <option value="0">请选择店铺</option>
            @foreach($shops as $s)
                <option value="{{$s['id']}}">{{$s['shop_name']}}</option>
            @endforeach
        </select>
    </div>

    <div class="layer_input">
        <input type="number" required id="id_start" name="id_start" value="" min="1" placeholder="初始序号"/>
        <input type="number" required id="id_end" name="id_end" value="" min="1" placeholder="结束序号"/>
    </div>
    <button type="button" value="确定" id="confirm">确定</button>
</div>

<script type="text/javascript" src="/static/layer/layer.js"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': "{{csrf_token()}}"
        }
    });

    $("#confirm").click(function(){
        var shop_id = $('#shop_id').val();
        var id_start = $("#id_start").val();
        var id_end = $("#id_end").val();
        if(shop_id == 0 || shop_id == undefined || shop_id == '') {
            layer.msg('请选择店铺');
            return false;
        }
        if(id_start == '' || id_start == 0 || id_start == undefined) {
            layer.msg('请输入初始序号');
            return false;
        }
        if(id_end == '' || id_end == 0 || id_end == undefined) {
            layer.msg('请输入结束序号');
            return false;
        }
        if(parseInt(id_end) < parseInt(id_start)){
            layer.msg('初始序号不得大于结束序号');
            return false;
        }
        $.ajax({
            url: "{{urlAdmin($ctr, 'postReferBindShop')}}",
            data:{shop_id:shop_id,id_start:id_start,id_end:id_end},
            type:'post',
            success: function(res){
                if(res.status == 1) {
                    layer.msg(res.msg);
                    parent.location.reload();
                } else {
                    layer.msg(res.msg);
                    layer.close();
                }
            },
            fail:function(){
                layer.close()
            }
        });
    });
</script>


<style>
    .layer_div{
        width: 100%;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    button{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 3rem;
        background: #6AC20B;
        color: #fff;
        border: none;
        font-size: 1rem;
    }
    .layer_form select{
        width: 23rem;
        height: 2rem;
    }
    .layer_input{
        width: 100%;
        margin-top: 2rem;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .layer_input input{
        width: 100%;
        height: 2rem;
        margin-top: 1rem;
        margin: 0 0.5rem;

    }
    .layer_select{
        width: 100%;
        height: 2rem;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        margin-top: 1rem;
    }
    .layer_select select{
        width: 96%;
    }
</style>